import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Table,
  Card,
  Button,
  Divider,
  PageHeader,
  Row,
  Col,
  Form,
  Input,
  Select,
  Badge,
} from 'antd';
import 'antd/dist/antd.css';


const routes = [
  {
    path: 'index',
    breadcrumbName: '首页',
  },
  {
    path: '',
    breadcrumbName: '渠道管理',
  },
  {
    path: 'add',
    breadcrumbName: '新增渠道',
  },
];


class AddChannelPage extends React.PureComponent {
  //渲染
  render() {
    return (
      <PageHeader title="新增渠道" breadcrumb={{ routes }} style={{textAlign:'left'}} >
        <Card  bordered={false} style={{ marginTop: 24 }}>
        <Form.Item label="商户名称" className="form-text">
            <span className="ant-form-text">网龙控股网络有限公司</span><br />
          </Form.Item>
          <Form.Item label="应用的APPID" className="form-text">
            <span className="ant-form-text">China</span><br />
            <span><a className="tipcolor">应用的APPID是开放平台的开发识别码，配合开发者密码可调用平台的接口能力。</a></span>
          </Form.Item>
          <Form.Item label="APP的Secret" className="form-text">
            <span className="ant-form-text">China</span><br />
            <a className="tipcolor">开发者密码是校验开发者身份的密码，具有极高的安全性。切记勿把密码直接交给第三方开发者或直接存储在代码并请使用授权方式接入。</a>
          </Form.Item>
          <Form.Item label="IP白名单" className="form-text">
            <Input addonAfter={<Button type="primary">验证</Button>} />
            <a className="tipcolor">通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单</a>
          </Form.Item>
          </Card>
          <Card title="服务器配置" >
          <Form.Item label="服务器地址(URL)" className="form-text">
            <Input addonAfter={<Button type="primary">验证</Button>} />
            <a className="tipcolor">必须以http://或https://开头，分别支持80端口和443端口。</a>
          </Form.Item>
          <Form.Item label="EncodingKey(URL)" className="form-text">
          <Input addonAfter={<Button type="primary">随机生成</Button>} />
            <a className="tipcolor">消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。</a>
          </Form.Item>
        </Card>
      </PageHeader >
    );
  }
}

//字面意思就是，把models的state变成组件的props
function mapStateToProps(state) {
  console.log(state);
  return { channel: state.channel } // test就是models命名空间名字;
}
export default connect(mapStateToProps)(AddChannelPage)   
